<template>
    <div class="order-view" style="color: aqua;">
        <el-button type="text" @click="showView(data.id)">{{
            data.code
        }}</el-button>
        <el-dialog title="销售订单 - 详情" :visible.sync="dialogVisible" width="80%" :before-close="handleClose"
            :modal-append-to-body="false" :append-to-body="true">
            <div>
                <template>
                    <div>
                        <el-descriptions>
                            <el-descriptions-item label="单据编号" content-class-name="my-content">{{
                                data.code
                            }}</el-descriptions-item>
                            <el-descriptions-item label="单据日期">{{
                                data.createDate
                            }}</el-descriptions-item>
                            <el-descriptions-item label="客户">{{
                                data.cusName
                            }}</el-descriptions-item>
                            <el-descriptions-item label="业务员">{{
                                data.createBy
                            }}</el-descriptions-item>
                            <el-descriptions-item label="出库状态">
                                <span :style="getStatusStyle(data.stockStatus)">
                                    {{ getStatusText(data.stockStatus) }}
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item label="付款状态">
                                <span :style="getStatusStyle(data.payStatus)">
                                    {{ getStatusText1(data.payStatus) }}
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item label="总金额">{{
                                data.total
                            }}元</el-descriptions-item>
                            <el-descriptions-item label="申请订单审批人">{{
                                data.auditName
                            }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
                <el-table :data="orderDetail" border style="width: 100%">
                    <el-table-column prop="proName" label="商品名">
                    </el-table-column>
                    <el-table-column prop="number" label="数量">
                    </el-table-column>
                    <el-table-column prop="unitName" label="单位">
                    </el-table-column>
                    <el-table-column label="单价">
                        <template slot-scope="scope">
                            {{ scope.row.price }} 元
                        </template>
                    </el-table-column>
                    <el-table-column prop="outStock" label="出库数量">
                    </el-table-column>
                    <el-table-column label="小计">
                        <template slot-scope="scope">
                            {{ scope.row.subtotal }} 元
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { saleOrderList } from "@/api/xiaoshou/saleOrder";

export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        name: "OrderView";
        return {
            dialogVisible: false,
            statusName: '',
            orderDetail: [],
        };
    },
    methods: {
        handleClose(done) {
            done();
        },
        showView(orderId) {
            this.dialogVisible = true;
            saleOrderList(orderId).then(response => {
                this.orderDetail = response.data;
            });
        },
        getStatusText(status) {
            const statusMap = {
                0: '待出库',
                1: '部分出库',
                2: '全部出库',
            };
            return statusMap[status] || '未知状态';
        },
        getStatusText1(status) {
            const statusMap = {
                0: '待付款',
                1: '部分付款',
                2: '全部付款',
                3:'已挂帐'
            };
            return statusMap[status] || '未知状态';
        },
        getStatusStyle(status) {
            const statusMap = {
                0: 'color: orange;',
                1: 'color: green;',
                2: 'color: #409eff;',
                3: 'color: red;',
            };
            return statusMap[status] || 'color: black;';

        },
    },
    mounted() {

    }

};
</script>
<style>
.my-content {
    color: #409eff;
}
</style>
